<template>
  
  <div class="block text-center" style="margin-top: -4px;">  
    <h3 class="demonstration">掌握知识，畅聊无阻——尽在我们的聊天刷题网站！</h3>  
    <el-carousel trigger="click" height="300px">  
      <el-carousel-item v-for="(image, index) in images" :key="index">  
        <img :src="image" alt="轮播图片" style="width: 100%; height: auto;">  
      </el-carousel-item>  
    </el-carousel>  
  </div>  

  <div class="container">  
    <h1>掌握知识，畅聊无阻——尽在我们的聊天刷题网站！</h1>  
    <p>欢迎来到全新的学习交流平台——【网站名称】！在这里，我们致力于为您打造一个轻松、有趣且高效的刷题与学习环境。无论您是学生、教师还是终身学习者，我们的聊天刷题网站都将是您最佳的学习伙伴！</p>  
    <div class="feature">  
      <h2>一、实时互动，激发学习热情</h2>  
      <ul>  
        <li>【网站名称】独创的聊天式刷题模式，让您在学习过程中实时与其他学习者交流心得、分享经验。</li>  
        <li>在这里，学习不再孤单，而是充满乐趣与活力的社交体验！</li>  
      </ul>  
    </div>  
    <div class="feature">  
      <h2>二、海量题库，满足各种需求</h2>  
      <ul>  
        <li>我们的题库涵盖了各个学科、各个年级的精选题目，定期更新，保证您总能找到适合自己的练习题目。</li>  
        <li>同时，我们还提供个性化的刷题建议，助您针对性提升薄弱环节。</li>  
      </ul>  
    </div>  
    <div class="feature">  
      <h2>三、智能分析，助力个性化学习</h2>  
      <ul>  
        <li>通过【网站名称】的智能分析系统，您可以实时了解自己的学习情况，包括正确率、错题解析、知识点掌握程度等。</li>  
        <li>基于这些数据，我们将为您提供定制化的学习建议和资源推荐，让您的学习更加高效。</li>  
      </ul>  
    </div>  
  </div>  
          
  </template>
      
      <script>
      import { ref } from 'vue'
      import { TableColumnCtx, TableInstance } from 'element-plus'
      import axios from 'axios';
      export default {
        data() {  
    return {  
      images: [  
        'https://ts1.cn.mm.bing.net/th/id/R-C.f4dda9e43ea3da2ae6b19c7c575f2e1c?rik=zRZiuF%2btUMVrIA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f81%2f8381.jpg&ehk=byvTF1l%2fvXEyqoFs5%2fiVszBKiG4eJxtCFAg%2fKGKB3no%3d&risl=&pid=ImgRaw&r=0',  
        'https://ts1.cn.mm.bing.net/th/id/R-C.f36656fe02a645a3d5524006bb573b1d?rik=gRMGRTpK51Mz1g&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545127.jpg&ehk=USKU3oPkKugGChkWgHVVwVTA71oYILzZdpJfC1Vl87A%3d&risl=&pid=ImgRaw&r=0', 
        'https://ts1.cn.mm.bing.net/th/id/R-C.31df3a5a2d8462228734f95d459883e2?rik=7EE6TeWDk%2f%2bctQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214331.jpg&ehk=SpI7mz%2byLqOkT8BL79jcd3iCtQYNFlBHQzbtF1p0vuQ%3d&risl=&pid=ImgRaw&r=0', 
      ],  
    };  
  },  
      methods:{
          loadGet(){
              axios.post('http://localhost:8090/user/listP',{}).then(res=>res.data).then(res=>{
                  console.log('测试2')
                  console.log(res)
                  if(res.code==200){
                      this.tableData=res.data
                  }else{
                      alert('获取数据失败')
                  }
                  
              }) 
              console.log("测试！！！！！！");
          },
          mod(row){
              this.form.id=row.id
              this.form.no=row.no
              this.form.name=row.name
              this.form.password=''
              this.form.age=row.age+''
              this.form.sex=row.sex+''
              this.form.phone=row.phone
              this.centerDialogVisible=true
              console.log(row)
  
          },
          domode(){
              axios.post('http://localhost:8090/user/mod',this.form).then(res=>res.data).then(res=>{
                  console.log(this.form)
                  this.centerDialogVisible=false
                  this.loadGet();
                  console.log(res);
              }) 
          },
          loadPost(){
            axios.post('http://localhost:8090/user/listP',{}).then(res=>res.data).then(res=>{
                  console.log(res);
              }) 
          }
      },
      beforeMount(){
          this.loadGet();
      }
      }
      </script>
      
      <style scoped>
          .dialog-footer button:first-child {
               margin-right: 10px;}

               .container {  
  max-width: 1200px;  
  margin: 0 auto;  
  padding: 50px;  
}  
h1 {  
  text-align: center;  
  color: #333;  
}  
h2 {  
  color: #666;  
  margin-top: 30px;  
}  
p {  
  margin-top: 15px;  
  line-height: 1.6;  
  color: #888;  
}  
.feature {  
  margin-top: 50px;  
}  
.feature h3 {  
  color: #333;  
}  
.feature ul {  
  list-style-type: none;  
  padding: 0;  
}  
.feature li {  
  margin-top: 10px;  
  position: relative;  
  padding-left: 30px;  
}  
.feature li::before {  
  content: "•";  
  position: absolute;  
  left: 0;  
  color: #66b3ff;  
  font-size: 20px;  
}  
      </style>